<template>
	<view class="content">
		<view class="topBase">
			<uni-nav-bar title="订单详情" left-icon="back" @clickLeft="gotoBack" :border="false" color="#fff" rightIcon="headphones" right-text="客服"  backgroundColor="transparent"></uni-nav-bar>
		</view>
		<view class="stuInfo"  v-if="showModel">
			<view class="schoolInfo">
				<image class="schoolImg" src="../../static/orderShool.png" mode="widthFix"></image>
				<view class="schoolName">{{msgDict.school}}:{{detailInfo.schoolName}}</view>
			</view>
			<view class="personG">
				<image class="personImg" src="../../static/orderPerson.png" mode="widthFix"></image>
				<view class="person">
					<view class="personI">
						{{msgDict.name}}:{{detailInfo.studentName}}
					</view>
					<view class="personI">
						{{msgDict.gender}}:{{detailInfo.sex}}
					</view>
					<view class="personI">
						{{msgDict.grade}}:{{detailInfo.grade}}
					</view>
					<view class="personI">
					    {{msgDict.Class}}:{{detailInfo.clazz}}
					</view>
				</view>
			</view>
			<view class="addressContent">
				<image class="addressImg" src="../../static/orderAddr.png" mode="widthFix"></image>
				<view class="addressInfo">
					<view class="userInfo">
						<text class="name one-omit">{{detailInfo.contract}}</text>
						<text class="phone">{{detailInfo.phone}}</text>
					</view>
					<text class="address ">{{detailInfo.address}}
					</text>
				</view>
			</view>
		</view>
		<!-- 订单模块 -->
		<view class="orderPart" v-if="showModel">
			<view class="goodsInfo">
				<view class="orderGoods" v-for="(item,index) in detailInfo.list" :key="index">
					<view class="box-thumbnail">
						<image :src="item.pic" mode="aspectFill"></image>
					</view>
		
					<view class="box-info">
						<view class="box-info__top">
							<view class="box-info__title ellipsis--2">
								{{item.goodsName}}
							</view>
							<view class="box-info__total_amount">
								￥{{item.oneGoodsTotalPrice}}
							</view>
						</view>
		
						<view class="box-info__bottom">
							
							<view class="box-info__status">{{msgDict.size}}  {{item.size.data[0].value}}</view>
							<view class="box-info__num">x{{item.num}}</view>
						</view>
					</view>
				</view>
				
			</view>
			<view class="orderTime">
				<view class="orderPrice">
					<text class="title">{{msgDict.orderNum}}：</text>
					<text class="num">{{detailInfo.orderCode}}</text>
				</view>
				<view class="orderPrice">
					<text class="title">{{msgDict.creatTime}}：</text>
					<text class="num">{{detailInfo.orderCreateTime}}</text>
				</view>
			</view>
			
			<view class="order-info">
				<view class="common ">
					<text class="text1">{{msgDict.total}}</text>
					<text class="num">￥{{detailInfo.goodsTotalPrice}}</text>
				</view>
				<view class="common common2">
					<text class="text1" >{{msgDict.shipping}}</text>
					<text class="num" v-if="detailInfo.freight">￥{{detailInfo.freight}}</text>
					<text class="num" v-else>{{msgDict.freeShipp}}</text>
				</view>
				
				<view class="payAll">
					{{msgDict.realpay}}：<text>￥{{detailInfo.totalPrice}}</text>
				</view>
			</view>
			<view class="appraise" v-if="status == 7 || status == 8" @click="btnAppraiseClick">
				<view class="lab1">
					{{msgDict.evaluate}}
				</view>
				<view class="icon">
					<uni-icons type="paperclip" color="ccc" size="25"></uni-icons>
				</view>
			</view>
		</view>
		
		<view class="jiesuan-box" v-if="status == 1 || status == 4 || status == 6">
			<view class="btnCheck" @click="btnCancelOrderClick">
				{{msgDict.cancel}}
			</view>
			<view class="btnSure showBtnBackColor" v-if="status == 1" @click="btnPayclick">
				{{msgDict.payment}}
			</view>
		
		</view>
	</view>
</template>

<script>
	import {throttle} from '../../util/util.js'
	import {orderInfo,settlement,cancelOrder,orderPay} from '../../api/index.js'
	export default {
		
		data() {
			return {
				
				detailInfo:{},
				status:'3',
				userId:undefined,
				stuId:'',
				orderCode:'',
				saleType:'',
				msgDict:{},
				showModel:false,
				goodsData: [{item:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2442212990,857057054&fm=26&gp=0.jpg',productName:'哈芙琳英伦深色秋季套装',salePrice:'200',quantity:120,num:2}], //商品信息
			}
		},
		onLoad(options) {
			
		   this.msgDict = getApp().globalData.$t('orderDetail');
		   
		   this.userId = getApp().globalData.userId
		   this.stuId = getApp().globalData.stuId
			uni.setNavigationBarColor({
				backgroundColor:'#FF1493'
			})
			
			if (options.orderCode) {
				
	        
			this.orderCode = options.orderCode
			this.saleType = options.saleType
			this.requstOrderInfo();
			}
			
		},
		methods:{
			async requstOrderInfo(){
				
				try{
				let {result} = await orderInfo({orderCode:this.orderCode});
			    this.detailInfo = result;           
				this.status = result.orderStatus
				this.showModel = true
				} catch(err) {
			    	console.log('我请求啦',err);
			    	uni.showToast({
			    		title:err.message,
			    		icon:'none'
			    	})
			    }
			
			
			},
			async requestCancelOrder() {
						
				let {result} = await cancelOrder({
					orderCode:this.orderCode,
					userId:this.userId
				});
				
				this.status = 5;
				let pages = getCurrentPages();
				let page = pages[pages.length - 2];
				page.$vm.isAllowBack = true;
						
			},
			//取消订单
			btnCancelOrderClick(){
				let that = this;
				uni.showModal({
					title:this.msgDict.Tips,
					content:this.msgDict.msgCancelOrder,
					cancelText:this.msgDict.cancel,
					confirmText:this.msgDict.confirm,
					success(res) {
						if (res.confirm) {
							
						that.requestCancelOrder();
							
						}
					}
					
				})
			},
			
			//确认支付
			btnPayclick:throttle(function(){
				this.gotoRequest();
			},1500),
			async gotoRequest(){
				//调结算接口
				const {result} = await orderPay({
					orderCode:this.orderCode
				});
				uni.redirectTo({
					url:'../payMent/payMent?result='+encodeURIComponent(JSON.stringify(result))
				})
			},
			//查看评论
			btnAppraiseClick(){
			   uni.navigateTo({
			   	url:'../evaluation/evaluation?orderCode='+this.orderCode
			   })	
			},
			gotoBack(){
				uni.navigateBack({
					delta:1
				})
			}
			
		}
	}
</script>

<style lang="less">
	page{
		background-color: #F8F9FD;
		height: 100%;
	}
	.topBase{
		padding: 0 20rpx;
		padding-top: calc(0upx + var(--status-bar-height));
		display: flex;
		justify-content: space-between;
		background: linear-gradient(180deg, #8250FD 0%, #5644E5 100%);
		height: 400rpx;
		
		.kefu{
			
			font-size: 30rpx;
			color: #fff;
		
		}
		
	}
	.stuInfo{
		position: relative;
		margin: -260rpx 20rpx 0;
		// height: 230rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding-top: 20rpx;
		
		.schoolInfo{
			display: flex;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #f5f5f5;
			padding-left: 20rpx;
			.schoolImg{
				
				width: 30rpx;
				height: 30rpx;
				margin-top: 5rpx;
			}
			.schoolName{
				font-size: 26rpx;
				font-weight: 500;
				color: #333;
				margin-left: 30rpx;
				
			}
			
		}
		.personG{
			display: flex;
			align-items: center;
			padding-left: 20rpx;
			.personImg{
				width: 30rpx;
				height: auto;
			}
			.person{
				flex: 1;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin-left: 30rpx;
				.personI{
					width: 300rpx;
					color: #333;
					font-size: 26rpx;
					font-weight: 400;
					margin-top: 20rpx;
				}
			}
		}
		.addressContent {
			
			margin-top: 20upx;
			
			padding-bottom: 20upx;
			
			
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-left: 20upx;                                                                                        
		
			.addressImg {
				
				width: 20upx;
				height: 30upx;
			}
		
			.addressInfo {
			    margin-left: 40rpx;
		
				.userInfo {
					display: flex;
					flex-direction: row;
					align-items: center;
					
					font-size: 26upx;
					font-weight: 400;
					color: #333;
		
					.name {
						max-width:350upx ;
					}
		
					.phone {
						margin-left: 20upx;
					}
				}
		
				.address {
		
					font-size: 26upx;
					font-weight: 400;
					color: #999;
	
				}
			}
		}
		
	}
	
.orderPart {
	// background: #FFFFFF;
	// box-shadow: 0upx 2upx 10upx 0upx #EEF0F4;
	// 
	margin-top: 20upx;
	padding: 0 20rpx;
	padding-bottom: 140rpx;
	padding-bottom: calc(140rpx + constant(safe-area-inset-bottom));  
	padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
	

	.goodsInfo {
		display: flex;
		padding: 40upx 30rpx 0;
		flex-direction: column;
		background-color: #fff;
		border-radius: 20upx;
			.orderGoods:last-child{
				border-bottom: 1rpx solid #fff;
				margin-bottom: 0upx;
			}
			.orderGoods {
				display: flex;
				flex-direction: row;
				margin-bottom: 40upx;
				padding-bottom: 40rpx;
				border-bottom: 1rpx solid #f2f2f2;
				
			
				.box-thumbnail {
					width: 106upx;
					height: 106upx;
					margin-right: 20upx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 8px;
						border: 1rpx solid #f2f2f2;
					}
				}
			
				.box-info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					.box-info__top{
						
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: #333333;
						font-size: 24upx;
						font-weight: 400;
						.box-info__total_amount {
							font-size: 30rpx;
						
							white-space: nowrap;
							margin-left: 30rpx;
							
						}
						
						
							
					}
			
			
					.box-info__bottom {
						// margin-top: 10upx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 24upx;
						color: #999;
						// margin-top: 30rpx;
						.box-info__num{
							font-size: 28rpx;
						}
					}
				}
			}

	}
	
	.order-info{
		padding: 10upx 30rpx 30rpx;
		background-color: #fff;
		border-radius: 20upx;
		margin-top: 20rpx;
		
		.common2{
			// margin-top: 30rpx;
			
			// padding-bottom: 20rpx;
		}
		.common {
		
			// background-color: #007AFF;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			height: 86rpx;
	        font-size: 26upx;
			font-weight: 400;
			border-bottom: 1rpx solid rgba(181,181,181,0.2);
			.text1 {

				
				color: #666;
				
			}
	
			.num {
				
				
				color: #333;
				
			}
			

		}
		
		.payAll{
			
			width: 100%;
			text-align: right;
			
			font-size: 28rpx;
			font-weight: 400;
			color: #333;
			margin-top: 30rpx;
			
			text{
				font-size: 32rpx;
				font-weight: bold;
			}
			
		}
	}
	
	.appraise{
		display: flex;
		justify-content: space-between;
		padding:40rpx 20rpx;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		
		.lab1{
			font-size: 34rpx;
			color: #333;
			border-left: 10rpx solid #FFA500;
			padding-left: 10rpx;
			height: 52rpx;
			line-height: 52rpx;
			margin-left: 10rpx;
			
		}
		
	}
	
}
.orderTime{
	margin-top: 20rpx;
	padding: 10rpx 30rpx;
	background-color: #fff;
	border-radius: 20upx;
	.orderPrice:last-child{
		border-bottom: 0rpx solid rgba(181,181,181,0.2);
	}
	.orderPrice {
	
	   display: flex;
		// justify-content: space-between;
	   // margin-top: 20rpx;
	   height: 86rpx;
	   align-items: center;
	   font-size: 26upx;
	   font-weight: 400;
	   border-bottom: 1rpx solid rgba(181,181,181,0.2);
		.title {
			color: #666;
		}
	
		.num {
			
			
			color: #333333;
		}
	}
}

.jiesuan-box {
	
	width: 750rpx;
	// height: 100upx;
	// border-radius: 50rpx;
	position: fixed;
	padding-bottom: 40rpx;
	padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));  
	padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
	padding-top: 30rpx;
	padding-right: 20rpx;
	left: 0;
	bottom: 0;
	border-top: 1px solid #eee;
	background-color: #fff;
	display: flex;
	justify-content: flex-end;
	.btnCheck {
	
		width: 168upx;
		height: 70upx;
		border-radius: 35upx;
		// border: thin solid #999999;
		background-color: #F2F2F2;
		font-size: 28upx;
		color: #333;
		line-height: 70rpx;
		text-align: center;
		margin-right: 20upx;
	
	}
	.btnSure {
		
		width: 168upx;
		height: 70upx;
		border-radius: 35upx;
		// border: thin solid #FF1493;
		color: #fff;
		font-size: 28upx;
		text-align: center;
		line-height: 70rpx;
		margin-right: 30rpx;
	
	}

}
</style>
